<template>
  <view class="">
    <view class="box_b" v-if="!token">
      <dao title="登录" color="#000" :left="true" />
      <view style="margin-top: 40rpx"></view>
      <text class="title">您好，</text>
      <br />
      <text class="title">欢迎来到三禾物联设备!</text>

      <div style="margin-top: 30px">
        <!-- <logins /> -->
        <!--  -->
        <phone :rre="rre" @reeche="showDrawer" />
      </div>
      <!-- <div class="wang">
        <text @click="yanzheng">手机验证码登录</text>
        <text @click="wangji">忘记密码</text>
      </div> -->

      <div  class="san">
      <view
    
      >
        <button 
        v-if="rre"
     
        style="border: 0;width: 300rpx;" :plain="true"
      
         class="brn" open-type="getPhoneNumber"
          @getphonenumber="getPhoneNumber">

          手机号一键登录
        </button>

        <button 
        v-else
     
     style="border: 0;width: 300rpx;" :plain="true"
     @click="showDrawer"
      class="brn"
      >

       手机号一键登录
     </button>
      </view>
        <!-- checked="true" -->
        <view 
        
        style="margin-top:100rpx;
         position: relative;">	

        <view v-if="xian" class="xieyi">请阅读并勾选用户协议</view>
       <radio
        @click="rre=!rre;xian=false"
       style="transform:scale(0.7)"
          color="#3383fe"
          :checked="rre"
          />
          <text  style="color: #666;">我已阅读并同意用户
            <text
             @click="jusd"
            style="color:#3383fe ;"
            >
            服务协议，
          </text>
          <text
          @click="jussd"
            style="color:#3383fe ;"
            >
            隐私协议
          </text>
          
          </text>
      </view>
      </div>
    </view>

    <view v-else>
      <!-- 头像昵称区域 -->
      <view class="top-box">
        <!-- <button
          class="avatar-wrapper"
          open-type="chooseAvatar"
          @chooseavatar="onChooseAvatar"
        >
          <image class="avatar" :src="userInfo.logo"></image>
        </button> -->
        <input v-model="userData.name" placeholder-style="color:#fff" type="nickname" @change="genxin"
          class="weui-input" placeholder="请输入昵称" />
      </view>
      <view class="panel-list">
        <!-- 第二个面板 -->
        <!-- 第二个面板 -->
        <view class="panel">
          <!-- 面板的标题 -->
          <!-- <view class="panel-title">我的报价</view> -->
          <!-- 面板的主体 -->
          <view class="panel-body">
            <!-- 面板主体中的 item 项 -->
            <view @click="callChildMethod" class="panel-item">
              <uni-icons type="contact" size="30"></uni-icons>
              <text>报警</text>
            </view>
            <!-- <view @click="kecheng" class="panel-item">
              <uni-icons type="gift-filled" size="30"></uni-icons>
              <text>福利</text>
            </view> -->

            <view @click="task" class="panel-item">
              <uni-icons type="calendar" size="30"></uni-icons>
              <text>记录</text>
            </view>
          </view>
        </view>
        <!-- 第三个面板 -->
        <!-- 第三个面板 -->
        <view class="panel">
          <view @click="logout" class="panel-list-item">
            <text>退出登录</text>
            <uni-icons type="arrowright" size="15"></uni-icons>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {
    onLoad,
    onShow,onHide
  } from "@dcloudio/uni-app";


import phone from "./phone/index.vue";
import dao from "../conpments/daohang.vue";
import { useCounterStore } from "../../stores/counter";
import { ref, onMounted, inject, getCurrentInstance, computed } from "vue";
import { login, getuser } from "../../api/login";
const mychat: any = inject("mychat");
onMounted(() => {
  // 组件能被调用必须是组件的节点已经被渲染到页面上
});

const lineStyle = {
  width: 1,
  opacity: 0.5,
};
const rre=ref(false)


let dakai = ref(false);
const task = () => {
  // uni.navigateTo({
  //   url: `/pages/my/task`,
  // });
};

const callChildMethod = () => {
  dakai.value = true;
};
const kecheng = () => {
  // uni.switchTab({
  //   url: "/pages/index/index",
  // });
};
const counter = useCounterStore();
// 一个计算属性 ref
const token = computed(() => {
  return counter.token;
});

const yin = () => {
  
  if (!token.value) {
    // uni.hideTabBar();
  }
};

onShow(()=>{
  yin();
})


let userData = computed(() => {
  return counter.userData;
});

const genxin = (e: any) => {
  userData.value.name = e.detail.value;
  counter.instUser(userData.value);
};

const dssds = ref();
// 打开窗口

const getPhoneNumber = (e: any) => {
  if (e.detail.code) {
    uni.login({
      provider: "weixin", //使用微信登录
      univerifyStyle: {
        fullScreen: true,
      },
      onlyAuthorize: true,
      success: async function (loginRes) {
        // 发起请求，一个登入请求

        const { data } = await login(loginRes.code, e.detail.code);
        //打印请求结果

        //判断请求结果，并执行对应的逻辑
        if (data.code == 200) {
          // 请求成功，执行登入成功逻辑
          
          // 把token存入本地
          uni.showToast({
            title: "登录成功！",
            icon: "success",
            duration: 500,
          });
          setTimeout(async ()=>{
            counter.instquan(data.data.purePhoneNumber);
          counter.increment(data.data.token);
          // 登陆成功建立链接
              // 登陆成功建立链接
              mychat.create()
          mychat.onSocketOpen()
          const res = await getuser();
          counter.instUser(res.data.data);
          },500)
      
   
        } else {
          console.log("请求失败，执行登入失败逻辑");
        }
      },
    });
  }
};

const xian=ref(false)



const showDrawer = () => {

  xian.value=true
  
 };
 const jussd=()=>{
  uni.navigateTo({
      url: `/subpkg/yonghu/index`,
   
    });
 }
 const jusd=()=>{
  uni.navigateTo({
      url: `/subpkg/yinsi/index`,
   
    });
 }
const logout = async () => {
  const data: any = await uni.showModal({
    title: "提示",
    content: "确认退出登录吗？",
  });

  if (data.confirm) {
    // uni.hideTabBar();
  counter.instShouData({
    Offline: [],
    Online: [],
  })
    counter.removeTkeen();
    counter.instUser("");
    counter.indizhi('')
    counter.removeTquan()
    counter.incrementName({});
    mychat.onSocketCloseyonh()
  }
};

</script>

<style scoped lang="scss">

.xieyi{
 font-size: 24rpx;
  position: absolute;
  top: -60rpx;
  background-color:#282727;
  color: #fff;
 padding: 15rpx;
  border-radius:10rpx
}
::v-deep .brn {
  margin-top: 20rpx;
  width: 100%;
  border-radius: 50rpx;
  color: #fff;
  background-image: linear-gradient(to right, #53c4ff, #40a3ff, #3383fe);

}

.san {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 150px;
  flex-direction: column;

  text {
    font-size: 14px;
    color: #adacac;
  }

  image {
    width: 40px;
    height: 30px;
  }
}

.wang {
  margin-top: 30rpx;
  display: flex;
  justify-content: space-between;
  width: 100%;

  font-size: 28rpx;
  color: #b4b3b3;
}

.my-userinfo-container {
  height: 100%;
  // 为整个组件的结构添加浅灰色的背景
  background-color: #f4f4f4;
}

input {
  text-align: center;
}

.panel-list {
  padding: 0 10px;
  position: relative;
  top: -10px;

  .panel {
    background-color: white;
    border-radius: 3px;
    margin-bottom: 8px;

    .panel-body {
      display: flex;
      justify-content: space-around;

      .panel-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        font-size: 13px;
        padding: 10px 0;
      }
    }
  }
}

.panel-list {
  padding: 0 10px;
  position: relative;
  top: -10px;

  .panel {
    background-color: white;
    border-radius: 3px;
    margin-bottom: 8px;

    .panel-title {
      line-height: 45px;
      padding-left: 10px;
      font-size: 15px;
      border-bottom: 1px solid #f4f4f4;
    }

    .panel-body {
      display: flex;
      justify-content: space-around;

      .panel-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        font-size: 13px;
        padding: 10px 0;

        .icon {
          width: 35px;
          height: 35px;
        }
      }
    }
  }
}

.panel-list-item {
  height: 45px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  padding: 0 10px;
}

.avatar {
  width: 60px;
  height: 60px;
}

.avatar {
  display: block;
  width: 90px;
  height: 90px;
  border-radius: 45px;
  border: 2px solid white;
  box-shadow: 0 1px 5px black;
}

button {
  padding: 0;
  border-radius: 45px;
}

.top-box {
  height: 400rpx;
  padding-top: 60rpx;
  background-color: $uni-primary;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

:deep(.weui-input) {
  font-weight: bold;
  font-size: 16px;
  margin-top: 10px;
  text-align: center;
  color: white !important;
}

.weui-input::placeholder {
  color: white !important;
}

.nickname {
  color: white !important;
}

.box_b {
  padding: 0 20px 20px 20px;

  .title {
    font-size: 26px;
    font-weight: 700;
    line-height: 30px;
  }
}

.btn-login {
  width: 90%;
  background-color: #029d94;
  color: #f4f4f4;
}

.insd {
  color: #f4f4f4;
}
</style>
